<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 1、获取到元素
        var  box = document.querySelector(".box")

        // querySelector :具体的元素
        // getelementbyid:通过id名来获取一个具体的元素
        // getelementsbyclassname:通过类名来获取一堆元素  数组存放 -数组的特性、0、[]、for
        // 获取图片的位置  offsetTop相对于屏幕
        var  top1 = box.offsetTop
        var  left1 = box.offsetLeft
        // console.log(top);
        // 2、键盘按下事件
        document.onkeydown = function(event){
            // event.keyCode  对应的键盘相应的按键按下后的值
            // 上  38    右 39    下 40     左37
           
            if(event.keyCode == 39){
                // 按下时每次距离加10
                left1 +=10
                box.style.left = left1 + "px"
            }
            if (event.keyCode == 37){
                left1 -= 10
                box.style.left = left1 +"px"
            }
            if(event.keyCode == 40){
                top1 += 10
                box.style.top = top1 + "px"
            }
            if(event.keyCode == 38){
                top1 -= 10
                box.style.top = top1 + "px"
            }
        }
    </script>
</body>
</html>